import styles from './waterfall.module.css';
import {
  useEffect,
  useRef
} from 'react'
import { Tag } from 'react-vant';

const Waterfall = (props) => {
  
  const loader = useRef(null);
  // 添加默认值以防止undefined错误
  const {
    loading,
    fetchMore,
    products = [],
    column = 2 // 默认双列布局
  } = props

  useEffect(() => {
    const observer = new IntersectionObserver(([entry], obs) => {
      if (entry.isIntersecting) {
        fetchMore && fetchMore(); // 添加空值检查
      }
    })
    if (loader.current) observer.observe(loader.current);
    return () => observer.disconnect();
  }, [fetchMore])
  
  // 单列布局实现
 // 单列布局实现
if (column === 1) {
  return (
    <div className={styles.wrapper}>
      <div className={`${styles.column} ${styles.singleColumn}`}>
        {
          products.map(product => (
            <div key={product.id} className={styles.productItem}>
              <div className={styles.productImageContainer}>
                <img 
                  src={product.image} 
                  alt={product.title} 
                  className={styles.productImage} 
                  style={{ 
                    height: product.height || 120, // 设置默认高度
                    minHeight: 120 // 确保最小高度
                  }}
                />
              </div>
              <div className={styles.productInfo}>
                <div className={styles.productTitle}>{product.title}</div>
                <div className={styles.productPriceContainer}>
                  <span className={styles.productPrice}>¥{product.price}</span>
                  {product.originalPrice && (
                    <span className={styles.productOriginalPrice}>¥{product.originalPrice}</span>
                  )}
                  {product.discount && (
                    <Tag plain type="danger" className={styles.discountTag}>
                      值 {product.discount}
                    </Tag>
                  )}
                </div>
                <div className={styles.productMeta}>
                  <span className={styles.productSource}>{product.source}</span>
                  <span className={styles.productTime}>{product.time}</span>
                </div>
              </div>
            </div>
          ))
        }
      </div>
      <div ref={loader} className={styles.loader}>{loading ? '加载中...' : '加载更多'}</div>
    </div>
  )
}
  
  // 双列布局实现 (保持不变)
  return (
    <div className={styles.wrapper}>
      <div className={styles.column}>
        {
          products.filter((_, i) => i % 2 !== 0).map(product => (
            <div key={product.id} className={styles.productItem}>
              <img src={product.image} alt={product.title} style={{ width: '100%' }} />
            </div>
          ))
        }
      </div>
      <div className={styles.column}>
        {
          products.filter((_, i) => i % 2 === 0).map(product => (
            <div key={product.id} className={styles.productItem}>
              <img src={product.image} alt={product.title} style={{ width: '100%' }} />
            </div>
          ))
        }
      </div>
      <div ref={loader} className={styles.loader}>{loading ? '加载中...' : '加载更多'}</div>
    </div>
  )
}

export default Waterfall